<style lang="less">
    @import '../../styles/common.less';
</style>

<template>
    <div>
        <Row class="margin-top-10">
            <Col span="24">
                <Card>
                    <p slot="title" style="height:25px;">
                        <Icon type="plus-round"></Icon> 新增角色
                    </p>
                    <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                        <Form-item label="角色名称" prop="name">
                            <Input v-model="formValidate.name" placeholder="Enter..." style="width: 300px"></Input>
                        </Form-item>
                        <Form-item label="显示标题" prop="display_name">
                            <Input v-model="formValidate.display_name" placeholder="Enter..." style="width: 300px"></Input>
                        </Form-item>
                        <Form-item label="描述" prop="description">
                            <Input v-model="formValidate.description" placeholder="Enter..." style="width: 300px"></Input>
                        </Form-item>
                        <Form-item label="权限" prop="access">
                            <Tree ref="tree" :data="treeData" show-checkbox @on-check-change="getTreeSelect"></Tree>
                        </Form-item>

                        <Form-item>
                            <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                            <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                        </Form-item>
                    </Form>
                </Card>
            </Col>
        </Row>
    </div>
</template>
<script>
    import qs from 'qs'
    export default {
        data () {
            return {
                formValidate: {
                    uuid: '',
                    name: '',
                    display_name: '',
                    description: '',
                    access: [],
                },
                treeData: [],
                ruleValidate: {
                    name: [
                        { required: true, message: '角色名称 不能为空', trigger: 'blur' }
                    ],
                    display_name: [
                        { required: true, message: '显示标题 不能为空', trigger: 'blur' }
                    ],
                    access: [
                        {type: "array"},
                        {required: true, message: '权限 不能为空'}
                    ],
                }
            }
        },
        methods: {
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        let apiRequest = null;
                        if (this.formValidate.uuid) {
                            apiRequest = this.$api.admin_role_edit(this.formValidate);
                        } else {
                            apiRequest = this.$api.admin_role_add(this.formValidate);
                        }

                        apiRequest.then((res) => {
                            let d = res.data;
                            if (d.code == 0) {
                                this.$Notice.success({
                                    title: 'Success',
                                    desc: '操作成功'
                                });
                                this.$router.push({
                                    name: 'roleList'
                                });
                            } else {
                                this.$Notice.error({
                                    title: 'Error Warning',
                                    desc: `Error：${d.msg}<br>`
                                });
                            }
                        });
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            },

            /**获取权限tree*/
            getTree () {
                this.$api.admin_permission_getList().then((res) => {
                    let d = res.data;
                    if (d.code == 0) {
                        this.treeData = this.$gFun.makeTreeData.call(this, d.data);
                    } else {
                        this.$Notice.error({
                            title: 'Error Warning',
                            desc: `Error：${d.msg}<br>`
                        });
                    }
                });
            },

            /**获取勾选的数据*/
            getTreeSelect () {
                let check = this.$refs['tree'].getCheckedNodes();
                this.formValidate.access = this.$gFun.getCkeckUuid.call(this, check, this.treeData);
            },

        },
        created () {
            this.getTree();
        }
    }
</script>
